---
title: Script Tag Quickstart
sidebar_label: Script Tag
description: "Add Convex to any website"
hide_table_of_contents: true
sidebar_position: 450
---

import sampleData from "!!raw-loader!@site/../private-demos/quickstarts/nodejs/sampleData.jsonl";
import tasks from "!!raw-loader!@site/../private-demos/quickstarts/nodejs/convex/tasks.js";
import html from "!!raw-loader!@site/../demos/html/simple.html";

Learn how to query data from Convex from script tags in HTML.

<StepByStep>
  <Step title="Create a new npm project">
    Create a new directory for your Convex project.

    ```sh
    mkdir my-project && cd my-project && npm init -y
    ```

  </Step>
  <Step title="Install the Convex client and server library">
    Install the `convex`
    package which provides a convenient interface for working
    with Convex from JavaScript.

    ```sh
    npm install convex
    ```

  </Step>
  <Step title="Set up a Convex dev deployment">
    Next, run `npx convex dev`. This
    will prompt you to log in with GitHub,
    create a project, and save your production and deployment URLs.

    It will also create a `convex/` folder for you
    to write your backend API functions in. The `dev` command
    will then continue running to sync your functions
    with your dev deployment in the cloud.


    ```sh
    npx convex dev
    ```

  </Step>

  <Step title="Create sample data for your database">
    In a new terminal window, create a `sampleData.jsonl`
    file with some sample data.

    <Snippet
      source={sampleData}
      title="sampleData.jsonl"
    />

  </Step>

  <Step title="Add the sample data to your database">
    Now that your project is ready, add a `tasks` table
    with the sample data into your Convex database with
    the `import` command.

    ```
    npx convex import --table tasks sampleData.jsonl
    ```

  </Step>

  <Step title="Expose a database query">
    Add a new file `tasks.js` in the `convex/` folder
    with a query function that loads the data.

    Exporting a query function from this file
    declares an API function named after the file
    and the export name, `api.tasks.get`.

    <Snippet
      source={tasks}
      title="convex/tasks.js"
    />

  </Step>

  <Step title="Copy the deployment URL">
    Open the `.env.local` file and copy the `CONVEX_URL` of your development
    environment for use in the HTML file.

    <></>

  </Step>

  <Step title="Add the script to your webpage">
    In a new file `index.html`, create a `ConvexClient` using
    the URL of your development environment.

    Open this file in a web browser and you'll see it run each time the `tasks`
    table is modified.

    <Snippet
      source={html}
      title="index.html"
      replacements={[
        [/https?:\/\/localhost:8000/g, 'CONVEX_URL_GOES_HERE'],
        [/messages:list/g, 'tasks:get'],
        [/\(messages\)/g, '(tasks)'],
        [/messages.map\(\(msg\) \=\> msg\.body\)/g, 'tasks.map((task) => task.text)'],
      ]}
    />

  </Step>

</StepByStep>

See the complete [Script Tag documentation](/client/javascript/script-tag.mdx).
